{% extends 'base.html' %}
 <script src="../static/layui/layui.js"></script>


{% block style %}
    <link rel="stylesheet" href="../static/layui/css/layui.css"/>
{% endblock %}
    <style>
        /*表格*/
        .table {
            width: 100%;
            margin: 0 auto;
            padding-top: 40px;
        }

        .table tr {
            height: 40px;
            align-items: center;
            font-size: 14px;
            font-family: Microsoft YaHei;
            line-height: 40px;
        }

        .table tr td {
            padding: 0 !important;
        }

        .layui-table-tool {
            font-size: 16px;
            font-family: Microsoft YaHei;
        }
        .layui-table,.layui-table-header{
            background: none!important;
        }

        /*用户信息表单*/
        #userInfo {
            width: 90%;
            margin: 0 auto;
            margin-top: 40px;
        }

        #userInfo .layui-form-item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        #userInfo .layui-form-label {
            display: inline-block;
            padding-left: 0;
            padding-right: 0;
            text-align: left;
            width: 40%;
        }

        #userInfo .layui-input-block {
            display: inline-block;
            margin-left: 0;
            width: 75%;
        }

        #userInfo .btn {
            width: 100%;
        }

        #userInfo .btn .layui-input-block {
            width: 100%;
            margin: 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        #userInfo .btn .layui-input-block .layui-btn {
            background-color: #1E9FFF;
        }

        {#下拉列表#}
        dd.layui-this {
            background-color: #1E9FFF !important;

        }

        {#头部工具#}
        .layui-table-tool {
            width: 100%;
            display: flex;
            flex-direction: row;
            background:none;
        }

        .layui-table-tool .layui-table-tool-temp {
            width: 100%;
            padding-right: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        {#行内工具#}
        #operateBtn {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            width: 90%;
            margin: 0 auto;
            height: 100%;
        }

        #operateBtn a:hover {
            color: #2671EE;
        }

        #operateBtn div {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        #operateBtn div img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }

        #operateBtn div li {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            color: #2671EE;
        }

        .layui-icon-set-sm:before {
            content: "\e620";
            text-align: center;
            position: absolute;
            display: block;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        #operateBtn div .text {
            font-size: 14px;
            font-weight: 400;
            color: #009688;
            background: none;
            padding-right: 0;
        !important;
            padding-left: 0;
        !important;
        }

        {#赋权表单#}
        #userCount {
            display: flex;
            width: 220px;
            height: 150px;
            flex-direction: column;
            justify-content: space-around;
            align-content: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); /*自己的50% */

        }

        #userCount div {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-content: center;
        }

        #userCount div:nth-child(2) {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-content: center;
        }

        #userCount .userCountValue {
            height: 36px;
            width: 80px;
            font-size: 16px;
            line-height: 36px;
            font-family: Microsoft YaHei;
            color: #666;
            text-align: center;
        }

        #userCount .userCountBtn {
            height: 40px;
            width: 50px;
            border-color: #1E9FFF;
            background-color: #1E9FFF;
            font-size: 25px;
            line-height: 40px;
            font-family: Microsoft YaHei;
            color: #FFFFFF;
            padding: 0;
        }

        #userCount #ok {
            font-size: 14px;
            border-radius: 2px;
            border-color: #1E9FFF;
            background-color: #1E9FFF
        }

        #userCount #cancel {
            font-size: 14px;
            border-radius: 2px;
            border-color: #1E9FFF;
            background-color: #1E9FFF
        }

        {#删除用户#}
        .layui-layer-btn {
            text-align: center !important;
        }
        .layui-table-fixed{
            display: none;
        }
    </style>


{% block content %}
    <!--新增用户表单-->
       <div class="container-fluid">
        <div class="row h-600 align-items-center justify-content-center" style="min-height: 400px;">
                <div class=" rounded p-4 p-sm-5 my-2" style="background:#fff">
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <a href="" class="">
                            <h3 class="text-primary"><i class="fa fa-user-edit me-2"></i>反馈</h3>
                        </a>
                    </div>
                    <div class="form-floating mb-4">
                        <input type="text" class="form-control" id="ftitle" placeholder="请输入反馈内容" style="background:#fff">
                        <label for="ftitle">标题</label>
                    </div>
                    <div class="form-floating mb-4">
                        <textarea name="fcontent" id="fcontent" placeholder="请输入反馈内容"  class="form-control" rows="55" style="background:#fff;height: 200px"> </textarea>
                        <label for="fcontent">内容</label>
                    </div>
                   
                    <div class="d-flex align-items-center justify-content-between mb-4">
                    </div>
                    <button type="button" class="btn btn-primary py-3 w-100 mb-4" id="addfeedback">提交</button>
                
                </div>
            </div>
    </div>
        <script type="text/javascript" src="../static/js/jquery.min.js"></script>

   <script type="text/javascript">
         //新增
       
        $("#addfeedback").click(function () {
                    $.ajax({
                        url: '/addfeedback',
                        method: 'post',
                        {#headers: {"X-CSRFToken": csrftoken},#}
                        data: {"ftitle":$("#ftitle").val().trim(),'fcontent':$("#fcontent").val().trim()},
                        dataType: 'JSON',
                        success: function (res) {
                            $('#userInfo').css('display', 'none')
                            layer.msg('新增成功！');
                        },
                        error: function (res) {
                            layer.msg('新增失败！');
                        }
                   });
                })
        
       
    </script>
{% endblock %}
{% block script %}
<script src="../static/layui/layui.js"></script>
{% endblock %}
